<template>
  <div class="Line">
    <ScreenTitle v-model:title-value="titleValue"></ScreenTitle>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script lang="ts" setup name="Line">
import { onMounted, ref, inject } from 'vue'
const charts = ref()

let titleValue = ref('未来七天用户数量趋势图')

const initEchartsOneFn = () => {
  const Echarts = inject('$echarts')
  let myChart = (Echarts as any).init(charts.value)
  const option = {
    title: {
      show: true,
      text: '访问量',
      left: '90%',
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      /* 设置X轴数据 */
      show: true,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      //设置Y轴样式,数据大小
      show: true,
      min: 0,
      max: 2000,
      /* 隐藏其网格,让其没有网格状美化 */
      splitLine: {
        //网格
        show: false
      }
    },
    /* 布局样式,让我们其图标全屏放大 */
    grid: {
      left: '1%',
      right: '1%',
      bottom: 0,
      top: 40,
      containLabel: true
    },
    /* 数据类型为折线图*/
    series: {
      type: 'line',
      data: [100, 1200, 200, 2000, 450, 800, 1100],
      smooth: true,
      /* 线条覆盖区域填充样式,才设置后成为区域面积图块 */
      areaStyle: {
        color: new Echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: ' rgba(245, 34, 45, 0.75)'
            },
            {
              offset: 1,
              color: 'rgba(114, 46, 209, 0.4)'
            }
          ],
          false
        )
      },
      /* 添加数据上的标签显示和样式 */
      label: {
        show: true,
        color: '#fff',
        position: 'top'
      }
    }
  }

  myChart.setOption(option)
}
onMounted(() => {
  initEchartsOneFn()
})
</script>

<style scoped>
.Line {
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  .charts {
    height: 200px;
    width: 100%;
  }
}
</style>
